<template>
<div class="pad20">
    <el-row>
        <el-col :span="4">
            <div class="menuWap2">
                <div class="t d">评估等级</div>
                <div v-for="(item, index) in menuList" :key="index" @click="menuIndex = index" class="d" :class="menuIndex == index?'a':''">{{item.name}}</div>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="left20">
                <div class=" clearfix ">
                    <span>
                        <el-select class="" v-model="value1" placeholder="已勾选服务项目">
                            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <span class="left20">
                        <el-select class="left10" v-model="value2" placeholder="请选择服务类型">
                            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <span class="left20">
                        <el-select class="left10" v-model="value3" placeholder="请选择服务项目">
                            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <span class="left20">
                        <el-select class="left10" v-model="value4" placeholder="请选择服务细分">
                            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <el-button type="primary">搜索</el-button>
                    <el-button type="primary" class="right">保存</el-button>
                </div>
                <el-table ref="multipleTable" class="top20" :data="list" fit highlight-current-row style="width: 100%;" header-row-class-name="tableHeader">
                    <el-table-column label="服务类型" prop="a" align='center'></el-table-column>
                    <el-table-column label="服务项目" prop="b" align='center'></el-table-column>
                    <el-table-column label="服务说明" prop="c" align='center'></el-table-column>
                    <el-table-column label="服务频次" prop="d" align='center'>
                        <template slot-scope="{row,$index}">
                            <el-select class="left10" v-model="row.d" placeholder="请选择频次">
                                <el-option v-for="item in [
                                    {label: '1次/天',value: '1次/天'},
                                    {label: '1次/周',value: '1次/周'},
                                    {label: '1次/月',value: '1次/月'},
                                    {label: '2次/周',value: '2次/周'},
                                    {label: '3次/月',value: '3次/月'},
                                ]" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="align-right top20">
                    <el-pagination v-show="total>0" :total="total" :current-page.sync="originalQuery.pageNumber" :page-size="originalQuery.pageSize" background layout="prev, pager, next" @current-change="getList" @size-change="sizeChange" />
                </div>
            </div>
        </el-col>
    </el-row>

</div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            value1:'',
            value2:'',
            value3:'',
            value4:'',
            menuIndex: 0,
            menuList: [
                {name: '能力完好'},
                {name: '轻度失能'},
                {name: '中度失能'},
                {name: '重度失能'}
            ],
            daterange: '',
            list: [
                {a: '助餐', b: '幸福套餐', c: '老人持卡到指定位置领饭后，在大厅就餐', d: '1次/天'},
                {a: '助洁', b: '擦玻璃服务', c: '老人预约擦玻璃服务，服务人员到老人家擦玻璃', d: '1次/周'},
                {a: '护助', b: '上门理发', c: '上门为老人理发', d: '1次/月'},
                {a: '助医', b: '陪同就医', c: '陪同老人到医院就医', d: '1次/月'},
                {a: '助乐', b: '陪聊服务', c: '陪同老人聊天', d: '2次/周'},
                {a: '助行', b: '陪伴老人外出散步', c: '陪同老人散步一小时', d: '3次/月'},
                {a: '护助', b: '老人衣物清洗和更换', c: '帮老人洗衣服和更换衣物', d: '1次/周'},
                {a: '助洁', b: '打扫卫生', c: '上门为老人打扫卫生', d: '1次/周'},
                
            ],
            total: 4000,
            originalQuery: {
                pageNumber: 1,
                pageSize: 20,
            },
            input: '',
            value: '',
            options: [{
                    label: '一级',
                    value: 1
                },
                {
                    label: '二级',
                    value: 2
                },
                {
                    label: '三级',
                    value: 3
                },
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        sizeChange() {

        },
        getList() {

        }
    }
};
</script>

<style scoped>

</style>
